<template>
	<view class="cont">
		<!-- 未预约显示页面 -->
		<template v-if="active == 0">
			<v-button @onclick="handleMakeApply">
				<image class="icon" src="../../../../static/icon/time.png" mode=""></image>
				<text style="margin-top: 2rpx; font-weight: bold;">我要预约</text>
			</v-button>
			<view class="number">
				已有 <text style="margin: 0 5rpx;"> {{ total }} </text> 用户预约
			</view>
		</template>
		<!-- 已预约显示页面 -->
		<template v-else>
			<view class="info">
				<text>{{info.appo_time}}</text>
				<text>{{info.course.shop.name}}</text>
				<text>{{info.course.shop.address}}</text>
			</view>
			<v-button @onclick="onClickApplyDetail" width="634" height="56" style="margin-bottom: 20rpx;">
				<text class="detail-text" style="margin-right: 20rpx;">已预约</text>
				<text class="detail-text">查看详情 {{ userAccredit ? '(未登录)' : '' }}</text>
			</v-button>
		</template> 
		<!-- 登录弹窗 -->
		<v-register v-if="visible" @cancel="onRegisterCancel"></v-register>
	</view>
</template>

<script>
	import vButton from "@/components/button/button.vue"
	
	export default {
		name: "home_subscribe",
		components: {
			vButton
		},
		props: {
			info: Object,
			total: String | Number
		},
		data: () => ({
			active: 0,
			name: "home_subscribe",
			visible: false
		}),
		watch:{
			info(val) {
				this.active = val ? 1 : 0
			}
		},
		// 计算属性
		computed: {
			userAccredit() {
				return this.$store.state.userAccredit;
			}
		},
		methods: {
			// 处理申请预约 跳转至预约页面
			handleMakeApply() {
				if(this.userAccredit) {
					this.visible = true;
					return
				}
				this.onGoNext("/pages/make-apply/second-step/second-step")
			},
			// 点击跳转至预约详情页面
			onClickApplyDetail() {
				if(this.userAccredit) {
					this.visible = true;
					return
				}
				this.onGoNext("/pages/make-apply/apply-detail/apply-detail")
			},
			onRegisterCancel() {
				this.visible = false;
				this.$emit("update")
			}
		},
	}
</script>

<style lang="scss" scoped>
	.cont{
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.icon{
			width: 43rpx;
			height: 43rpx;
			margin-right: 20rpx;
		}
		.number{
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			font-size: 19rpx;
			line-height: 19rpx;
			color: $text-color;
			text{
				color: $text-color-red;
			}
			
			&::before,
			&::after{
				content: "";
				width: 75rpx;
				height: 1rpx;
				background-color: $text-color;
				margin: 0 20rpx;
			}
		}
		.info{
			font-size: 25rpx;
			color: #2C0101;
			margin-bottom: 24rpx;
			text{
				margin: 0 10rpx;
			}
		}
		.detail-text{
			 font-size: 25rpx;
			 color: #2C0101;
		}
	}
</style>
